<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
 $(document).ready(function(){	
	 //추가 버튼 클릭
	 $("#addBtn").click(function(){			 
		  $("#addBoardListAndboardNameModify").html(createTable());		  
	 });
	 //추가 버튼은 클릭시 <span> 으로 생성되는 버튼을  
	 //on<- 속성으로 제어
	 $("#addBoardListAndboardNameModify").on("click","#resultBtn",function(){	
		 var kind=$(":input:radio:[name=kind]:checked").val();
		 var boardName=$("#boardName").val();
		 if(!kind){
			 alert("게시판의 종류를 선택하세요");
			 return false;
		 }else if(boardName==""){
			 alert("게시판 명을 입력하세요 ");
			 $("#boardName").focus();
			 return false;
		 }
		 var flag=confirm("추가시 자동저장 됩니다 추가하시겠습니까?");
		 if(flag){						 
				 //alert(kind+boardName);	
				 location.href="${pageContext.request.contextPath }/boardlist.do?command=addBoard&name="+boardName+"&kind="+kind+"&id=admin";	  
		 }		 	 
	 });	
	 //삭제 버튼 클릭
	 $("#delBtn").click(function(){
	 var selected=$("#bno option:selected").val();
	 var bname=$("#bno option:selected").text();
	  if(!selected){
			 alert("게시판을 선택해주세요");
			 return false;
		 } 
		 var flag=confirm("삭제 시 자동저장 됩니다. 삭제하시겠습니까?");
		 if(flag){
			 var bno=$("#bno").val();
			 //alert(bno);
			 location.href="${pageContext.request.contextPath }/boardlist.do?command=delBoard&bno="+bno+"&id=admin&name="+bname;			 
		 }
	 });
	 //업 버튼 클릭
	 $("#upBtn").click(function(){		
		 var selectedOptions = $("#bno option:selected");
	    	var prev = $(selectedOptions).prev();
	    	$(selectedOptions).insertBefore(prev);
	 });
	 //다운 버튼 클릭
	 $("#downBtn").click(function(){
		 var selectedOptions = $("#bno option:selected");
	    	var next = $(selectedOptions).next();
	    	$(selectedOptions).insertAfter(next);
	 });	
	 //저장 버튼 클릭
	 $("#saveBtn").click(function(){
		 var flag=confirm("저장하시겠습니까?");
		 if(flag){
		 var bno="";
		 $("#bno option").each(function(index){
			 //Controller 에 같은 파라미터 값으로 보내면
			 //request.getPrameterValues() 를 이용해
			 // String [] 형태로 값을 받을 수 있다.
			bno+="&board_no="+$(this).val();
			bno+="&order_no="+index;
		 });		 
		 location.href="${pageContext.request.contextPath }/boardlist.do?command=boardOrderModify"+bno+"&id=admin";
		 }
	 });
	 //취소 버튼 클릭
	 $("#cancelBtn").click(function(){
		 //alert("취소");
		 location.href="${pageContext.request.contextPath }/cafe.do?command=cafe";
	 });
	 //select 의 option 을 클릭할 때 마다 발생하는 이벤트
	 $("#bno option").click(function(){		 
		 var bName=$(this).text();		
		 //alert(bName);		 
		 $("#addBoardListAndboardNameModify").html(input(bName));
	 });
	 //select option 클릭시 발생하는 이벤트에서 게시판 명 수정버튼 클릭시
	 //발생하는 이벤트 <span>, <div> 에서 발생하는 버튼같은 것은
	 //$(document).ready() 시 생성되는 것이 아니므로
	 // on 속성을 이용해 제어할 수 있다.
	 $("#addBoardListAndboardNameModify").on("click","#modifyBtn",function(){
		 var bNo=$("#bno option:selected").val();
		 var bName=$("#modifyBname").val();
		 var flag=confirm("수정하시겠습니까?");
		 if(flag){
			 location.href="${pageContext.request.contextPath }/boardlist.do?command=boardNameModify&board_no="+bNo+"&name="+bName+"&id=admin";
		 } 
	 });
 });
 function input(bName){
	 var data="<font><b>게시판 명 수정</b></font><br>";
	  	  data+="<input type='text' id='modifyBname' value="+bName+" maxlength='5'>";
	 	  data+="<input type='image' src='${pageContext.request.contextPath }/img/boardlist/btn_list_modify.png' id='modifyBtn'>";
	 	  data+="<font style='font-size: 11px'>(영문/숫자/한글  합쳐서 6자이내)</font>";
	 	  return data;
 }

	function createTable(){
		var table="<font><b>게시판 종류 선택</b></font><br>";
		table+="<table border=0>";
		// thead : 머리글 
		//table+="<thead><tr><th>주식명</th><th>수량</th><th>총액</th></tr></thead>";
		table+="<tbody>";		
			table+="<tr>";
			table+="<td><input type='radio' name='kind' value='default'></td>";
			table+="<td>일반게시판</td>";
			table+="</tr>";
			table+="<tr>";
			table+="<td><input type='radio' name='kind' value='file'></td>";
			table+="<td>파일업로드게시판</td>";
			table+="</tr>";	
			table+="<tr>";
			table+="<td><input type='radio' name='kind' value='guest'></td>";
			table+="<td>방명록</td>";
			table+="</tr>";	
			table+="<tr>";
			table+="<td><input type='radio' name='kind' value='picture'></td>";
			table+="<td>사진게시판</td>";
			table+="</tr>";	
		table+="</tbody>";
		//tfoot : 바닥글 
		//table+="<tfoot align=center><tr><td colspan=3>주식현황</td></tr></tfoot>";
		table+="</table><br>";
		table+="<font><b>게시판 명</b></font><br>";
		table+="<input type='text' id='boardName' maxlength='5'>";
		table+="<input type='image' src='${pageContext.request.contextPath }/img/boardlist/btn_list_add.png' id='resultBtn'>";
		table+="<font style='font-size: 11px'>(영문/숫자/한글  합쳐서 6자이내)</font>";
		return table;		
	}
</script>

</head>
<body >
<c:choose>
<c:when test="${sessionScope.vo.id=='admin' }">
<table border="0" align="center"><tr><td>
<img src="img/boardlist/menu_img1.png">
</table>
<table  border="1" bordercolor="lightgray" align="center" style="BORDER-COLLAPSE: collapse;border-bottom: 1px ligthgray solid">
<tr >
<td align="center">
<img src="img/boardlist/menu_upButton.png" id="upBtn"></td>
<td><img src="img/boardlist/menu_downButton.png" id="downBtn"></td>
<td><img src="img/boardlist/menu_addButton.png" id="addBtn"></td>
<td><img src="img/boardlist/menu_delButton.png" id="delBtn"></td>
<td colspan="3" rowspan="3" valign="top" width="250px">
<br><br><br>
	<div id="addBoardListAndboardNameModify">	
			<font style="font-size: 14px;"><b>메뉴 설정 안내</b></font><br><br>
			<font style="font-size: 12px;">게시판 추가 / 삭제 / 수정 시 자동저장</font><br><br>
			<font style="font-size: 12px;">게시판의 순서를 변경하고자 할 때   </font><br><br>
			<font style="font-size: 12px;">순서 변경 후 순서 저장버튼을 클릭하세요.</font>		
	</div>	
</td>
</tr>
<tr>
<td align="center" colspan="4">
<select name="bno" id="bno" size="20px" multiple="multiple" style="width: 130px;overflow: visible;">
<c:forEach items="${requestScope.list }" var="blvo">
<option value="${blvo.board_no }">${blvo.name }</option>
</c:forEach>
</select>
</td>
</tr>
<tr><td colspan="4" align="center"><input type="image" src="${pageContext.request.contextPath }/img/boardlist/btn_ordersave.png" id="saveBtn"></td></tr>
</table>
<table align="center">
<tr>
<td align="center">
<input type="image" src="${pageContext.request.contextPath }/img/boardlist/btn_home.png" id="cancelBtn">
</td>
</tr>
</table>
</c:when>
<c:otherwise>
	<script>
		alert("관리자가 아닙니다. 돌가아가세요!!!!");
		location.href="${pageContext.request.contextPath }/cafe.do?command=cafe";
	</script>
</c:otherwise>
</c:choose>
</body>
</html>